<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>库存查询</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品编号">
            <el-input v-model="formInline.productNo" placeholder="输入商品编号"></el-input>
        </el-form-item>
        <el-form-item label="仓库名称">
            <el-select v-model="formInline.wareId">
                <el-option
                        v-for="item in warehouse"
                        :key="item.id"
                        :label="item.wareName"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="商品名称">
            <el-input v-model="formInline.iomGoods" placeholder="输入商品名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-divider><i></i></el-divider>
    <div style="float: right">
        <span style="text-align: center">搜索:</span>
        <el-input
                placeholder="请输入内容"
                v-model="search"
                clearable
                style="width: 200px;"
                @keyup.native="searchChange">
        </el-input>
    </div>

    <el-table
            ref="roleTable"
            :data="tableData"
            style="width: 100%;">
        <el-table-column label="序号">
            <template slot-scope="scope">
                <span >{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column label="商品编号">
            <template slot-scope="scope">
                <span >{{scope.row.productNo}}</span>
            </template>
        </el-table-column>
        <el-table-column label="商品名称">
            <template slot-scope="scope">
                <span >{{scope.row.product}}</span>
            </template>
        </el-table-column>
        <el-table-column label="仓库编号">
            <template slot-scope="scope">
                <span >{{scope.row.wareNo}}</span>
            </template>
        </el-table-column>
        <el-table-column label="仓库名称">
            <template slot-scope="scope">
                <span >{{scope.row.wareName}}</span>
            </template>
        </el-table-column>
        <el-table-column label="批次">
            <template slot-scope="scope">
                <span >{{scope.row.batch}}</span>
            </template>
        </el-table-column>
        <el-table-column label="单位">
            <template slot-scope="scope">
                <span >{{scope.row.companyName}}</span>
            </template>
        </el-table-column>
        <el-table-column label="现有数量">
            <template slot-scope="scope">
                <span >{{scope.row.nnum}}</span>
            </template>
        </el-table-column>
        <el-table-column label="承诺数量">
            <template slot-scope="scope">
                <span >{{scope.row.promiseNum}}</span>
            </template>
        </el-table-column>
        <el-table-column label="在途数量">
            <template slot-scope="scope">
                <span >{{scope.row.inNum}}</span>
            </template>
        </el-table-column>
        <el-table-column label="可供数量">
            <template slot-scope="scope">
                <span >{{scope.row.availableNum}}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="info" icon="el-icon-check" circle
                           @click="roleEdit(scope.$index,scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="查看详情" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="products">
            <table>
                <tr>
                    <td><span>商品编号：{{products.productNo}}</span></td>
                    <td><span>商品名称：{{products.product}}</span></td>
                </tr>
                <tr>
                    <td><span>仓库名称：{{products.wareName}}</span></td>
                    <td><span>仓库编号：{{products.wareNo}}</span></td>
                </tr>
                <tr>
                    <td><span>负责人：{{products.person}}</span></td>
                    <td><span>联系电话：{{products.telephone}}</span></td>
                </tr>
                <tr>
                    <td><span>批次：{{products.batch}}</span></td>
                    <td><span>单位：{{products.companyName}}</span></td>
                </tr>
                <tr>
                    <td><span>现有数量：{{products.nnum}}</span></td>
                    <td><span>承诺数量：{{products.promiseNum}}</span></td>
                </tr>
                <tr>
                    <td><span>在途数量：{{products.inNum}}</span></td>
                    <td><span>可供数量：{{products.availableNum}}</span></td>
                </tr>
            </table>

            <el-form-item label="描述">
                <el-input v-model="products.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">返回</el-button>

        </div>
    </el-dialog>

    <!--分页插件-->
    <div style="float: right;">
        <el-pagination
                background
                layout="prev, pager, next"
                @current-change="loadPage"
                :total="total"
                :current-page="current"
                :page-size="pageSize">
        </el-pagination>
    </div>
</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>

<script>
    new Vue({
        el:'#app',
        data(){
          return{
              tableData:null,
              formInline:{
                  productNo:null,
                  wareId:null,
                  iomGoods:null,
              },
              warehouse:[{
                 id:null,
                 wareName:null,
              }],
              //wareId:null,
              current:null,
              total:null,
              pageSize:null,
              search:null,
              dialogFormVisible:null,
              products:{
                  productNo:null,
                  product:null,
                  wareNo:null,
                  wareName:null,
                  batch:null,
                  companyName:null,
                  nnum:null,
                  promiseNum:null,
                  inNum:null,
                  availableNum:null,
                  remark:null,
                  person:null,
                  telephone:null,


              },
          }
        },
        mounted(){
            this.loadPage(1)
            axios.get("/wareEach")
                .then(value => {
                    this.warehouse=value.data.data
                });

        },
        methods:{
            loadPage(current){
                axios.get("/stocks?current="+current)
                    .then(value => {
                        //console.log(value.data.data)
                        this.tableData=value.data.data.records
                        this.total=value.data.data.total
                        this.current=value.data.data.current
                        this.pageSize=value.data.data.size
                    });
            },
            roleEdit(index,row){
                this.dialogFormVisible=true;
                this.products=row
            },
            closeMyDialog(){
                this.products={
                    productNo:null,
                        product:null,
                        wareNo:null,
                        wareName:null,
                        batch:null,
                        companyName:null,
                        nnum:null,
                        promiseNum:null,
                        inNum:null,
                        availableNum:null,
                        remark:null,
                        person:null,
                        telephone:null,

                }
            },
            onSubmit(){//单击查询按钮
                //console.log(this.formInline)
                axios.get("/stocksSub?productNo="+this.formInline.productNo+
                    "&wareId="+this.formInline.wareId+"&product="+this.formInline.iomGoods)
                    .then(value => {
                        console.log(value.data.data)
                        this.tableData=value.data.data
                    })

            },

            searchChange(){//右边模糊查询
                axios.get("/stockSearch?search="+this.search+"&current="+this.current)
                    .then(value => {
                        this.tableData=value.data.data
                    })
            },
        },
    })
</script>
</html>